<template>
    <div>
        <div>
            <myHead></myHead>
        </div>
        <div class="main">
            <div class="main-left">

                <myMenu></myMenu>
            </div>
            <div class="main-right">
                <mynav></mynav>

                <div class="right"> <router-view></router-view> </div>

            </div>
        </div>

    </div>
</template>
<style>
body {
    margin: 0;
    padding: 0;
    overflow: hidden;
}

.main {
    display: flex;
}

.main-left {
    width: 200px;
    height: calc(100vh - 50px);
}

.main-right {
    height: calc(100vh - 51px - 85px);
    width: calc(100vw - -200px);
}



.right {
    width: 98%;
    height: 100%;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    border-radius: 3px;
    padding: 5px;
    margin: 10px;
}

.el-menu {
    height: 100%;
}

</style>
<script>

import myMenu from "@/components/layout/myMenu.vue";
import mynav from "@/components/layout/nav.vue";
import myHead from "@/components/layout/head.vue"


export default {
    data:function(){
        return{
          
        }
    },
    methods: {
        
    },
    components: {
        myHead,
        myMenu,
        mynav,
        
    },
   
}

</script>